<template>
	<view>
		<view class="item">
			<view class="text_l">
				收货人
			</view>
			<view class="text_r">
				<input v-model="data.userName" type="text" placeholder="请输入收货人" />
			</view>
		</view>
		<view class="item">
			<view class="text_l">
				收货电话
			</view>
			<view class="text_r">
				<input v-model="data.userPhone" type="number" maxlength="11" placeholder="请输入收货人电话" />
			</view>
		</view>
		<view class="item">
			<view class="text_l">
				收货地址
			</view>
			<view class="text_rs">
				浙江省 台州市 温岭市
			</view>
		</view>
		<view class="item">
			<view class="text_l">
				详细地址
			</view>
			<view class="text_r flex_jc_sb">
				<textarea v-model="data.address" auto-height placeholder="请输入详细地址"></textarea>
				<image src="/static/dw1.png" mode="" @click="selectaddress"></image>
			</view>
		</view>

		<view class="mradd flex" @click="changeFlag">
			<image v-if="isFlag" src="/static/radioact.png" mode=""></image>
			<image v-else src="/static/radio.png" mode=""></image>
			默认地址
		</view>

		<view class="footerbtn">
			<view class="cont">
				<view class="btn" @click="handleSubmit">
					保存
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		addressList,addressAdd,addressInfo,addressEdit
	} from '@/common/http.api.js'
	
	const type = ref(0)
	onLoad((Option) => {
		type.value = Option.type
		if (Option.type == 1) {
			uni.setNavigationBarTitle({
				title: '新增收货地址'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '修改收货地址'
			})
			data.id = Option.id
			addressInfo({id:Option.id}).then(res=>{
				data.value = res.data
				isFlag.value  = res.data.flag == 1?true:false
			})
		}
	})



	const data = ref({
		id:'',
		flag:'',
		userName: '',
		userPhone: '',
		province: '浙江省',
		city: '台州市',
		county: '温岭市',
		address: ''
	})
	const isFlag = ref(false)
	function changeFlag(){
		isFlag.value = !isFlag.value 
	}

	function selectaddress() {
		uni.chooseLocation({
			success: function(res) {
				data.value.address = res.address
			},
			fail: (err) => {
				console.log(err);
			}
		});
	}
	function handleSubmit(){
		if (data.value.userName == '') {
			uni.showToast({
				title: '输入收货人',
				icon: 'none'
			})
			return
		}
		if (data.value.userPhone == '') {
			uni.showToast({
				title: '输入收货人电话',
				icon: 'none'
			})
			return
		}
		if (data.value.address == '') {
			uni.showToast({
				title: '输入详细地址',
				icon: 'none'
			})
			return
		}
		data.value.flag = isFlag.value?'1':'0'
		console.log(data.value.flag,isFlag.value);
		//新增
		if(type.value == 1){
			addressAdd(data.value).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '已添加收货地址',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			})
		}else{
			addressEdit(data.value).then(res=>{
				if(res.code == 200){
					uni.showToast({
						title: '收货地址已修改',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			})
		}
	}
</script>

<style lang="scss">
	.item {
		width: 710rpx;
		margin: 30rpx auto;
		display: flex;
		align-items: center;

		.text_l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			width: 180rpx;
		}

		.text_rs {
			width: 510rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			background: #F8F8F8;
			padding-left: 15rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		input {
			height: 70rpx;
			background: #F8F8F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding-left: 15rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.text_r {
			width: 510rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			background: #F8F8F8;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		textarea {
			padding-left: 15rpx;
			width: 430rpx;
			min-height: 70rpx;
		}
	}

	.mradd {
		margin-left: 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;

		}

		font-family: PingFang SC,
		PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #979797;
	}


	.footerbtn {
		width: 750rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		height: 120rpx;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			padding: 20rpx 20rpx 20rpx 40rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.btn {
				width: 670rpx;
				height: 80rpx;
				background: #FF7700;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>